<template>
	<view class="orderlist"  v-if="item!=null" :class="item.status==2?'err_bak':item.status==4?'red_bak':'su_bak'">
		<u-navbar :autoBack="true" title="匹配详情" :titleStyle="titleStyle" bgColor="rgba(0,0,0,0)" leftIconColor="#fff" :fixed="true" @click-left="$back" ></u-navbar>
		
		<view class="top_nav" >
			<view class="tp1">
				
				<view class="left">
					
				</view>
				
				<view v-if="item.status==0">
						距离派单结束还剩
				</view>
				<view v-if="item.status==1">
						恭喜匹配写手成功
				</view>
				<view v-if="item.status==2">
					 订单取消，匹配失败
				</view>
				<view v-if="item.status==4">
					 内容违规，平台下架处理
				</view>
				
				<view class="right">
					
				</view>
				
				
			</view>
			<view class="con">
				<view class="cons">
					<wly-countdown v-if="item.status==0" :day="getDateStr(item.sy_time,0)" :hour="getDateStr(item.sy_time,1)" :minute="getDateStr(item.sy_time,2)" :second="getDateStr(item.sy_time,3)" showType="slot">
						<template v-slot="{day, hour, minute, second}">
							<view style="display: flex;align-items: center;justify-content: center;padding-left: 20rpx;" v-if="day||hour||minute||second">
								<view class="time_model" :class="item.status==2?'err_time_model':''"  :style="item.status==4?'background: radial-gradient(50% 50% at 50% 50%, #ED3232 0%, #EE3636 100%);':''">
									<view>
										{{day}}
									</view>
									<view>
										天
									</view>
								</view>
								<view class="time_model" :class="item.status==2?'err_time_model':''" :style="item.status==4?'background: radial-gradient(50% 50% at 50% 50%, #ED3232 0%, #EE3636 100%);':''">
									<view>
										{{hour}}
									</view>
									<view>
										时
									</view>
								</view>
								<view class="time_model" :class="item.status==2?'err_time_model':''" :style="item.status==4?'background: radial-gradient(50% 50% at 50% 50%, #ED3232 0%, #EE3636 100%);':''">
									<view>
										{{minute}}
									</view>
									<view>
										分
									</view>
								</view>
								<view class="time_model" :class="item.status==2?'err_time_model':''" :style="item.status==4?'background: radial-gradient(50% 50% at 50% 50%, #ED3232 0%, #EE3636 100%);':''">
									<view>
										{{second}}
									</view>
									<view>
										秒
									</view>
								</view>
								
							</view>
						</template>
					</wly-countdown>
					
					<wly-countdown v-else :day="0" :hour="0" :minute="0" :second="0" showType="slot">
						<template v-slot="{day, hour, minute, second}">
							<view style="display: flex;align-items: center;justify-content: center;padding-left: 20rpx;" v-if="day||hour||minute||second">
								<view class="time_model" :class="item.status==2?'err_time_model':''"  :style="item.status==4?'background: radial-gradient(50% 50% at 50% 50%, #ED3232 0%, #EE3636 100%);':''">
									<view>
										{{day}}
									</view>
									<view>
										天
									</view>
								</view>
								<view class="time_model" :class="item.status==2?'err_time_model':''"  :style="item.status==4?'background: radial-gradient(50% 50% at 50% 50%, #ED3232 0%, #EE3636 100%);':''">
									<view>
										{{hour}}
									</view>
									<view>
										时
									</view>
								</view>
								<view class="time_model" :class="item.status==2?'err_time_model':''" :style="item.status==4?'background: radial-gradient(50% 50% at 50% 50%, #ED3232 0%, #EE3636 100%);':''">
									<view>
										{{minute}}
									</view>
									<view>
										分
									</view>
								</view>
								<view class="time_model" :class="item.status==2?'err_time_model':''" :style="item.status==4?'background: radial-gradient(50% 50% at 50% 50%, #ED3232 0%, #EE3636 100%);':''">
									<view>
										{{second}}
									</view>
									<view>
										秒
									</view>
								</view>
								
							</view>
						</template>
					</wly-countdown>
					
					
				</view>
			</view>
			<view class="bom">
				<text v-if="item.sy_time>0&status==0">
							定制需求 | 写手匹配 | 预计匹配于 {{item.end_time_str}}截止
				</text>
				<text v-else>
							定制需求 | 写手匹配 | 匹配成功倒计时自动结束
				</text>
			</view>
		</view>
		
		<view class="cont">
			<view class="cont_s">
				<view class="con_top" v-if="item.status==0">
					<view>
						<view>
							发布时间：
						</view>
						
						<view>
							{{item.apply_time}}
						</view>		
					</view>
					
					<image :src="'/images/bao.png'  | formatImgUrl" @click.stop="showReport = true" class="jubaoicon" v-if="(item.status==0 || item.status==1) && item.uid != $db.get('userInfo').membe_id"></image>
					<view class="ends" :class="item.status==2||item.status==4?'qx_status':''">
					
						<text v-if="item.status==0">待选择</text>
						<text v-if="item.status==1">匹配成功</text>
						<text v-if="item.status==2" class="qx_status" >已取消</text>
						<text v-if="item.status==4" class="qx_status " >内容违规</text>
				
					</view>
					
				</view>
				
				<view class="con_top" v-else>
					<view>
						<view>
							发布时间：
						</view>
						<view>
							{{item.apply_time}}
						</view>	
						
					</view>
					<view  v-if="item.status<4" class="ends" :class="item.status==2?'qx_status':''">
						<text v-if="item.status==0">待选择</text>
						<text v-if="item.status==1">匹配成功</text>
						<text v-if="item.status==2" class="qx_status" >已取消</text>
					</view>
					<view v-else class="ends" :class="item.status==4?'bnt_rigth_err_red':''">
						<text>内容违规</text>
					</view>
				</view>
				
				<view class="con_nav">
					<view class="navs">
						<view class="icon" :class="item.status==4?'bnt_rigth_err_red_str':''">订</view>
						<view class="navs_right">
							<view class="tp">
							字数共计{{item.tran_font_num}}{{item.tran_font_word}}，
							<!-- 价格每{{item.tran_font_word}}{{item.tarn_price}}元 -->
							
							<text v-if="item.task_type==0">
								价格每{{item.tran_font_word}}{{item.tarn_price}}币
							</text>
							<text v-else >
								价格共计{{parseInt(item.money)}}币
							</text>
							
							</view>
							<view class="bom">截稿时间：{{item.end_time.substring(0,17)}}，类型：{{item.c_desc}}</view>
						</view>
						
					</view>
					<view class="navs">
						
						<view class="icon xie" :style="item.status==4?'background: red !important':''" >写</view>
						<view class="navs_right">
							<view class="tp">写手等级为：【{{array_level_arr(item.level)}}】</view>
							<view class="bom">写手性别要求：{{item.sex==0?"不限":(item.sex==1?"男":"女")}}
								{{item.is_bao==0?"":'用户要求作品保密'}}
							</view>
						</view>
					</view>
					<view class="con_bomt">
						<block v-if="item.status==4">制作要求：</block>
						<block v-else><span>制作要求：</span></block>
						{{item.c_content}}
					</view>
				</view>
				<view class="bomt">
					<view class="bomt_a_left">此订单全额稿费预计</view>
					<view class="bomt_a_right" :style="item.status==4?'color:Red':''">
						{{item.money}}
						</view>
				</view>
				<view class="bomt" v-if="item.status!=1">
					<view class="bomt_a_left">应邀写手</view>
					<view class="bomt_a_right" :class="item.status==4? 'bomt_a_right_red' : ''">
						<span>{{item.apply_num}}位写手申请</span>
					</view>
				</view>
				
				<view class="empytView" v-if="list.length<=0&&item.status!=1">
					<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
					<!-- <view>- 空列表 -</view> -->
				</view>
				
				<view class="man_list"  v-for="(item,index) in list" v-if="item.status!=1">
					<view class="left">
						<image :src="item.user.pic | formatImgUrl" mode=""></image>
					</view>
					<view class="man_cont">
						<view class="man_top display-flex">
							{{item.user.username}}
							<image
								:src="$options.filters.formatImgUrl(item.user.writer_level.is_active?item.user.writer_level.level.image:item.user.writer_level.level.hide_img)"
								@click="$go('/pages/user/grade?uid='+item.user.membe_id)" class="jipic" mode=""
								v-if="item.user&&item.user.is_writer">
							</image>		
						</view>
						<view class="man_bomt">
							已完成{{item.user.order_count}}次约文
						</view>
					</view>
					<block v-if="item.status==4">
						<view class="man_right man_right_gray">
							去查看
						</view>
					</block>
					<block v-else>
						<view class="man_right" @click="look_apply(item,index)">
							去查看
						</view>
					</block>
				</view>
				
				
				
				<view class="bomt1" v-if="item.status==1">
					<view class="bomt_a_left">我选择的</view>
				</view>
				<view class="man_list1"  v-for="(item,index) in list" v-if="item.status==1">
					<view class="left">
						<image :src="item.user.pic | formatImgUrl"  mode="aspectFill"></image>
					</view>
					<view class="man_cont">
						<view class="man_top">
							<view class="nick">
								{{item.user.username}}
							</view>
							<view class="jibox">
								<image
									:src="$options.filters.formatImgUrl(item.user.writer_level.is_active?item.user.writer_level.level.image:item.user.writer_level.level.hide_img)"
									@click="$go('/pages/user/grade?uid='+item.user.membe_id)" class="jipic" mode=""
									v-if="item.user&&item.user.is_writer">
								</image>
							</view>
						</view>
						<view class="man_bomt">
							{{item.create_time}}
						</view>
					</view>
						<image src="../static/image/pp.png" class="pipi_sucess"  v-if="item.status==1" mode=""></image>
					<view class="cnbt">
						{{item.u_title}}
					</view>
					<view class="bom_img">
						<image :src="item | formatImgUrl" v-for="(item,index) in item.img" mode="aspectFill"></image>
					</view>
				</view>
				
				
				
				
				
				
				
				
				
			</view>
		</view>
		
		
		
		<view class="zhanwei"></view>
		
		
		<view class="tarb_new" v-if="item.status==0">
			<view class="tar_home">
				<view  @click="sumit_qx(item,1)">
					取消派单
				</view>
			</view>
			<view class="tar_order">
				<view @click="sumit_qx(item,0)" >
					重置时间
				</view>
			</view>
		</view>
		
		<view class="tarb_new" v-if="item.status==1">
			<view class="tar_home">
				<view @click="paidan()">
					再次派单
				</view>
			</view>
			<view class="tar_order">
				<view  @click="toImRoom()">
					立即沟通
				</view>
			</view>
		</view>
		
		
		<view class="tarb_new" v-if="item.status==2">
			<view class="tar_home">
				<!-- <view  @click="goToreport(item)">
					客服申诉
				</view> -->
				<view @click="paidan(item)" >
					重新派单
				</view>
			</view>
			
			<view class="tar_order">
				<view @click="sumit_qx(item,0)">
					重置时间
				</view>
			</view>
		</view>
		
		
		<view class="tarb_new" v-if="item.status==4">
			<view class="tar_home">
				<view  @click="sumit_qx(item,2)">
					删除派单
				</view>
			</view>
			<view class="tar_order" >
				<view @click="paidan(item)" :style="item.status==4?'background:red':''">
					重新派单
				</view>
			</view>
		</view>
		
		
		<view class="zong" style="width: 100%;margin-left: 0;">
			<view v-if="show1" class="">
				<bw-swiper :swiperList="list" :autoplay="false" :swiperType='true' :indicatorDots="false"
					previousMargin="60rpx" :current='current' nextMargin="60rpx" :info="info" :form="form" :items="item"
					style="width:625rpx;" @qr_order='qr_order'></bw-swiper>
				
				<!-- <view class="top">
					<image :src="info.user.pic | formatImgUrl" mode=""></image>
					<view>{{info.user.username}}</view>
					<view>申请抢单</view>
				</view>
				<view class="tab">
					<view>
						&nbsp;&nbsp;
						{{info.u_title}}
					</view>
				</view>
				
				<view class="not_like" v-if="info.img!='[]'">
					<view class="tp">例文示例</view>
					<view class="bom">
						<image v-for="(item,index) in info.img_arr" :src="item  | formatImgUrl"  @click="$common.previewImage(item,info.img_arr)" mode=""></image>
					
					</view>
				</view>
				
				
				<view class="cont_t" v-if="item.status==0">
					<view class="t1" @click="qr_order()">
						<view class="tex">
							确认匹配
						</view>
					</view>
				</view> -->
			
			
				<image class="cl1" @click="clone()" :src="'/images/cl1.png' | formatImgUrl" mode=""></image>
			</view>
			
		</view>
		
		<view v-if="show1" @click="clone()" class="zhezhao">
		</view>
		
		<!-- 举报派单 -->
		<u-popup :show="showReport">
			<view class="mask">
				<view class="matop" @click="$go('/pages/find/report?id='+uid + '&newtype=7')" >
					<view class="matxt">
						举报
					</view>
					<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
				</view>
				<view class="qubox" @click="showReport = false">
					取消
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as db from '@/common/db.js'
	import Config from "@/common/config.js"
	import bwSwiper from '@/wxcomponents/bw-swiper/bw-swiper.vue'
	import {
	  TUIConversationService,
	} from "@tencentcloud/chat-uikit-engine";
	var Screen = uni.requireNativePlugin('Yam-Screen');
	
	export default { 
		data() {
			return {
				show1:false,
				tar_index:0,
				id:'',
				item:null,
				list: [],
				page: 1,
				info:{},
				current: 0,
				showReport: false,
				titleStyle: {
					color: "#fff"
				},
				isClick: true
			}
		},
		onLoad(ops) {
			this.id = ops.id;
			this.get_info();
			this.get_list();
		},
		onReachBottom() {
			this.get_list();
		},
		onHide() {
			// #ifdef APP-PLUS
					setTimeout(()=>{
						Screen.closeAntiRecordScreen();
					},100)
			// #endif
		},
		
		onUnload() {
			
			// #ifdef APP-PLUS
					setTimeout(()=>{
						Screen.closeAntiRecordScreen();
					},100)
			// #endif
		},
		components:{
			bwSwiper
		},
		methods: {
			toImRoom() {
				//this.$db.get('userInfo')
			// 	console.log(this.list[0],133333333333)
			// 	if (this.$db.get('userInfo').membe_id == this.list[0].uid) {
			// 		console.log(111111111111111)
			// 		this.$store.commit('createConversationActive', this.item.uid)
			
			// 		var url = '/pages/tim/room?userType=1&showbox=1&uid=' + this.list[0].uid
			// 	} else {
			// 		console.log(22222222222)
			// 		this.$store.commit('createConversationActive', this.list[0].uid)
			// 		var url = '/pages/tim/room?userType=1&showbox=1&uid=' + this.item.uid
			
			// 	}
			
			// 	// this.$store.commit('createConversationActive', this.userInfo.membe_id)
			// 	// var url = ''
			
			// 	uni.navigateTo({
			// 		url: url
			// 	})
			
				let uid;
				if (this.$db.get('userInfo').membe_id == this.list[0].uid) {
					uid = this.item.uid
				}else{
					uid = this.list[0].uid
				}
				
				if(!this.isClick){
					
					return
				}
				
				this.isClick = false
				uni.request({
				    url: 'https://api.dreamyuewen.com/api/user/userInfo', 
				    data: {
				       uid: uid,
				    },
				    header: {
				        token: db.get('auth')
				    },
				    success: (res) => {
				        uni.setStorageSync("userItem",res.data.user);
						
						uni.request({
						    url: 'https://api.dreamyuewen.com/api/user/userPageList', 
						    data: {
						       uid: uid,
							   page: 1,
							   type: 1
						    },
						    header: {
						        token: db.get('auth')
						    },
						    success: (ress) => {
						        uni.setStorageSync("userPageList",ress.data.data.data);
								
								uni.request({
								    url: 'https://api.dreamyuewen.com/api/order/getTimOrderList', 
								    data: {
								       uid: uid,
								    },
								    header: {
								        token: db.get('auth')
								    },
								    success: (resss) => {
										setTimeout(()=> {
											this.isClick = true
										}, 2000);
								        uni.setStorageSync("orderList",resss.data.data);
										
										TUIConversationService.switchConversation('C2C'+uid);
										uni.navigateTo({
											url: '/TUIKit/components/TUIChat/index'
										})
								    }
								});
						    }
						});
				    }
				});
				
				
				
					
					
					
					
				// emits("handleSwitchConversation", item.conversationID);
				
			},
			paidans(item){
				uni.navigateTo({
					url: '/task/list/order_push&id=' + item.id
				})
			},
			paidan(){
				uni.navigateBack({//返回上一个页面
					delta:2
				});
			},
			goToreport(item) {
			
				uni.navigateTo({
					url: '/pages/find/report?type=3&id=' + item.id + '&newtype=6'
				})
			},
			showPay() {
				
				let auth = db.get('auth');
				console.log(auth,777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				
				if (!this.isRead) {
					this.isReadTip()
				} else {
					this.zhifu = true
				}
			},
			dianji(photoImg){
				console.log( Config.CdnUrl + photoImg,777)
				
				let imgsArray = [];
				imgsArray[0] = Config.CdnUrl + photoImg;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			
			},
			qr_order(index){
				//this.info.id,this.id
				
		
				//确认订单
				let str = "确认匹配";
				let _this = this;
				uni.showModal({
					// cancelText: '取消',
					// confirmText: '确定',
					confirmColor: '#45C4B0',
					
					content: '是否'+str+'【'+this.info.user.username+'】',
					success: function(res) {
						if (res.confirm) {
							_this.$api.default.request('task/order_pipei', {
								// id: _this.info.id,
								id: _this.list[index].id,
								pid:_this.id
							}).then((res) => {
								if (res.code) {
									//this.info.id,this.id
									uni.navigateTo({
										url: '/task/list/place?id='+_this.info.id
									})
							
								}
							})
						} else if (res.cancel) {
							
						}
					}
				})
				
			},
			get_list(){
				var _this = this;
				this.$api.default.request('task/orderListApply', {
					page: this.page,
					id:this.id
				}).then((res) => {
					if (res.code) {
						 if(res.data.data){
							if (_this.list != null) {
								// this.articleList.concat(res.data.data);
								_this.list = _this.list.concat(res.data.data);
								// res.data.data.forEach((item) => {
								// 	this.logList.push(item)
								// })
							} else {
								_this.list = res.data.data
								
							}
							_this.page++; // 页数加一，加载下一页数据
						}
					}
				})
			},
			clone(){
				this.show1 = false
			},
			look_apply(item,index){
				this.current = index
				this.info = item;
				this.show1 = true
			},
			sumit_qx(item,type){
				let str = "重置时间";
				if(type == 1){
					 str = "取消订单";
				}
				
				if(type == 2){
					 str = "删除订单";
				}
				let _this = this;
				uni.showModal({
					// cancelText: '取消',
					// confirmText: '确定',
					confirmColor: '#45C4B0',
					content: '是否'+str+'【'+item.c_title+'】',
					success: function(res) {
						if (res.confirm) {
							_this.$api.default.request('task/task_edit', {
								id: item.id,
								type:type
							}).then((res) => {
								if (res.code) {
									if(type == 2){
										_this.$common.errorToShow('删除成功');
										setTimeout(function(){
											uni.navigateBack({//返回上一个页面
												delta:1
											});
										},500);
										return;
									}else{
										_this.get_info()
									}
								
								}
							})
						} else if (res.cancel) {
							
						}
					}
				})
			},
			getDateStr(mss,type){
					    var days = parseInt(mss / 86400);
						var hours = parseInt((mss-(days*86400))/3600);
						var minutes = parseInt((mss-(days*86400)-(hours*3600))/60);
						var seconds = mss-(days*86400)-(hours*3600) - (minutes * 60)
						console.log(days,mss,77777777)
						
						 if(type == 0){
						 	 return days;
						 }
						 if(type == 1){
							  return hours;
						 }
						 if(type == 2){
						 	  return minutes;
						 }
						 if(type == 3){
							  return seconds;
						 }
					
			},	
			array_level_arr(index){
			
					var array_level = ['不限', '1-10', '11-20','21-30','21-30','31-40','41-50'];
					return array_level[index];
			},
			get_info(){
				var _this = this;
				this.$api.default.request('task/orderListdea', {
					id: this.id,
				}).then((res) => {
					if (res.code) {
						_this.item = res.data
					}
				})
			},
			goToxie() {
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + this.$config.default.Url + '/agreement/1000009'
				})
				
			},
			hidePay(e){
				console.log(e)
			},
			goPay(){
				
				this.$api.default.request('order/createvip', prams).then((res) => {
					if (res.code) {
						this.$common.wxPay(res.data, () => {
						
							that.$common.errorToShow('支付成功');
							setTimeout(function(){
								uni.navigateTo({
									url: '/pages/user/orderdetail?id=' + this.orderInfo.id
								})
							}, 800); 
						})
					}
				})
				
			},
			isReadTip() {
				if (!this.isRead) {
					this.$common.errorToShow('请先同意用户协议');
					this.isRead = 1
					setTimeout(() => {
						this.isRead = 0;
					}, 300)
					return
				}
			},
		}
	}
</script>

<style lang="scss">
	/deep/.wly-countdown{
		justify-content: center;
	}
	
	page{
		background: #f2f5f2;
	}
	
	.su_bak{
		background: url('../static/image/suc.png');
		background-size: 100% 100%;
		background-attachment: fixed;
		background-repeat: no-repeat;
	}
	.red_bak{
		background: url('/static/images/red_bak.png');
		background-size: 100% 100%;
		background-attachment: fixed;
		background-repeat: no-repeat;
	}
	.err_bak{
		background: url('../static/image/err.png');
		background-size: 100% 100%;
		background-attachment: fixed;
		background-repeat: no-repeat;
	}
	.time_model{
		float: left;
		// width:136rpx;
		// margin-left: 20rpx;
		// height: 146rpx;
		text-align: center;
		// background: radial-gradient(50% 50% at 50% 50%, #45C4B0 0%, #45CEB9 100%);
		border-radius:0.5em; 
		color: #fff;
		box-sizing: border-box;
		// border: 1px solid ;
		// border-image: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.00) 52%, rgba(255,255,255,0.30) 100%) 1;
		// box-shadow: 0px 0px 10px 0px #03D3B2,inset 0px 0px 5px 0px rgba(255, 255, 255, 0.3);
		background: url('@/static/images/border-shadow.png');
		background-size: cover;
		// padding-left: 20rpx;
		background-repeat: no-repeat;
		width:190rpx;
		height: 190rpx;
		padding-top: 20rpx;
		margin-left: -20rpx;
		
		&:first-child{
			margin-left: 0px;
		}
		view{
			padding-top: 10rpx;
			font-weight: 700;
			width: 100%;
			text-align: center;
			font-size:  70rpx;
			&:last-child{
				padding-top: 0;
				margin-top: -10rpx;
				font-size: 24rpx;
			}
		}
	}
	
	
	.err_time_model{
		// background: radial-gradient(50% 50% at 50% 50%, #999999 0%, #A3A7A6 100%) !important;
		// border-image: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.00) 52%, rgba(255,255,255,0.30) 100%)  !important;
		// box-shadow: 0px 0px 10px 0px #868686,inset 0px 0px 5px 0px rgba(255, 255, 255, 0.3) !important;
		background: url('@/static/images/border-shadow2.png');
		background-size: cover;
		background-repeat: no-repeat;
	}
	.orderlist {
		padding-top: 100px;
		box-sizing: border-box;
		
		.qx_status{
			background: rgba(216, 216, 216, 0.3) !important;
			color: #999999;
			border: 0px;
		}
		
		.wg_status{
			background: rgba(237, 50, 50, 0.3)!important;
			color: #ED3232;
			border: 0px;
		}
		.jipic {
			width: 41px;
			height:19px;
		}
		
		.biepic {
			width: 41px;
			height:19px;
			margin-left: 4px;
		}
		
		background-size: 100%;
		width: 100%;
		height: 100vh;
		.zhanwei{
			width: 100%;
			height: 200px;
			float: left;
			background-color: #F2F5F2;
		}
		
		.top_nav{
			// width: 92%;
			// margin-left: 4%;
			width: 100%;
			.tp1{
				padding-top:12px;
				color: #fff;
				width: 100%;
				text-align: center;
				overflow: hidden;   //隐藏
				white-space: nowrap;  //不换行
				text-overflow: ellipsis; //超出部分省略号
				.left{
					position: relative;
					width: 30px;
					height: 2px;
					left:20%;
					top:10px;
					background:linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0.00) 100%) ;
				}
				.right{
					position: relative;
					left:73%;
					width: 30px;
					top:-10px;
					height: 2px;
					background:linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0.00) 100%);
				}
			}
			.con{
				width: 100%;
				text-align: center;
				.cons{
					margin: 0 auto;
					// width:608rpx;
					margin-top: 20rpx;
					
				}
			}
			.bom{
				margin-top: 15px;
				width: 100%;
				font-size: 12px;
				text-align: center;
				color: #fff;
			}
		}
		.cont{
			width: 92%;
			margin-left: 4%;
			border-radius: 0.5em;
			background: #fff;
			margin-top: 6px;
			color: #3d3d3d;
			font-weight: 640;
			float: left;
			.cont_s{
				width: 90%;
				margin-left: 5%;
				.con_top{
					padding-top: 12px;
					width: 100%;
					font-size: 12px;
					float: left;
					font-weight: 400;
					color: #999;
					padding-bottom: 8px;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);
					view{
						float: left;
					}
					
					.ends{
						float: right;
						color: #45C4B0;
						font-size: 11px;
						font-weight: 500;
						background: rgba(69, 196, 176, 0.15);
						border-radius: 4px;
						padding: 3px 6px;
					}
					.bnt_rigth_err_red {
						color: #ED3232 !important;
						background: rgba(237, 50, 50, 0.15);;
					}
					.jubaoicon{
						float: right;
						width: 32rpx;
						height: 32rpx;
						margin-left: 15rpx;
						margin-top: 5rpx;
					}
				}
			}
			.con_nav{
				margin-top: 10px;
				width: 100%;
				float: left;
				.navs{
					.bnt_rigth_err_red_str {
						color: #fff;
						background: #ED3232 !important;
					}
					.icon{
						width: 14px;
						height: 14px;
						border-radius: 6px;
						padding: 2px 3px;
						background: #45C4B0;
						float: left;
						font-size: 9px;
						line-height: 14px;
						color: #fff;
						text-align: center;
						position: relative;
						top:2px;
						margin-right: 5px;
					}
					.xie{
						background: #7AAAF2 !important;
					}
					.navs_right{
						.tp{
							font-size: 15px;
							width: 90%;
							overflow: hidden;   //隐藏
							white-space: nowrap;  //不换行
							text-overflow: ellipsis; //超出部分省略号
						}
						.bom{
							margin-left: 25px;
							width: 90%;
							color: #999;
							font-size: 12px;
							font-weight: 400;
							margin-top: 5px;
							margin-bottom: 10px;
							overflow: hidden;   //隐藏
							white-space: nowrap;  //不换行
							text-overflow: ellipsis; //超出部分省略号
						}
					}
				}
				.con_bomt{
					font-weight: 400;
					width: 86%;
					padding-left: 7%;
					padding-right: 7%;
					padding-bottom: 15rpx;
					background: rgba(216, 216, 216, 0.3);
					color: #999;
					font-size:10px;
					border-radius: 0.5em;
					padding-top: 5px;
					span{
						color: #45C4B0;
					}
					overflow-wrap:break-word
				}
			}
			.bomt{
				 margin-top: 12px;
				 padding-bottom: 8px;
				 border-bottom:  1px solid rgba(153, 153, 153, 0.1);;
				 float: left;
				 width: 100%;
				 font-size: 15px;
				.bomt_a_left{
					float: left;
				}
				.bomt_a_right{
					float: right;
					color: #45C4B0;
					 font-size: 16px;
					span{
						font-size: 12px
					};
				}
				
				.bomt_a_right_red{
					color: #ED3232;
				}
				&:last-child{
					font-size: 12px;
				}
			}
			
			.bomt1{
				 margin-top: 12px;
				 padding-bottom: 8px;
			
				 float: left;
				 width: 100%;
				 font-size: 15px;
				.bomt_a_left{
					float: left;
					font-size: 12px;
				}
				.bomt_a_right{
					float: right;
					color: #45C4B0;
					 font-size: 16px;
					span{
						font-size: 12px
					};
				}
			
			}
			
			.bomt_one{
				width: 100%;
				float: left;
				margin-top: 20rpx;
				height: 100rpx;
				view{
					width: 290rpx;
					height: 64rpx;
					line-height: 64rpx;
					border-radius: 0.2em;
					font-size: 26rpx;
					text-align: center;
					&:first-child{
						float: left;
						// margin-left: 10px;
						background: rgba(216, 216, 216, 0.3);
						color: #999;
					}
					
					&:last-child{
						float: right;
						// margin-right: 10px;
						background: #45C4B0;
						color: #fff;
					}
				}
			}
			.man_list{
				width: 100%;
				float: left;
				margin-top: 15px;
				padding-bottom: 10px;
				.left{
					float: left;
					image{
						width: 36px;
						height: 36px;
						border-radius: 184px;
					}
				}
				.man_cont{
					
					margin-left: 5px;
					float: left;
					.man_top{
						font-family: '思源黑体';
						font-size: 13px;
						color: #3D3D3D;
						vertical-align: middle;
						
						image{
							width: 100rpx;
							height: 43rpx;
						}
					}
					.man_bomt{
						font-size: 13px;
						color: #999;
						font-weight: 600;
					}
				}
				.man_right{
					float: right;
					margin-right: 10px;
					text-align: center;
					width: 58px;
					height: 26px;
					line-height: 26px;
					border-radius: 4px;
					background: #45C4B0;
					font-size: 9px;
					color: #fff;
					margin-top: 10px;
				}
				
				.man_right_gray{
					background: #999;
				}
			}
			
			.man_list1{
				width: 100%;
				float: left;
				margin-top: 3px;
				padding-bottom: 10px;
				.left{
					float: left;
					image{
						width: 36px;
						height: 36px;
						border-radius: 184px;
					}
				}
				.pipi_sucess{
					position: relative;
					left: 130rpx;
					top: -70rpx;
					width: 140rpx;
					height: 130rpx;
					transform: rotate(-15deg);
					opacity: 1;
					filter: opacity(0.5);
				}
				.man_cont{
					
					margin-left: 5px;
					float: left;
					.man_top{
						
						.nick{
							float: left;
							font-family: '思源黑体';
							font-size: 13px;
							color: #3D3D3D;
						}
						// image{
						// 	width: 15px;
						// 	height: 15px;
						// }
						.jibox {
							float: left;
							display: flex;
							align-items: center;
						
							.jipic {
								width: 41px;
								height:19px;
							}
						
							.biepic {
								width: 41px;
								height:19px;
								margin-left: 4px;
							}
						}
					}
					.man_bomt{
						font-size: 12px;
						color: #999;
						font-weight: 600;
						float: left;
					}
				}
				.man_right{
					float: right;
					margin-right: 10px;
					text-align: center;
					width: 58px;
					height: 26px;
					line-height: 26px;
					border-radius: 4px;
					background: #45C4B0;
					font-size: 9px;
					color: #fff;
					margin-top: 10px;
				}
				
				.cnbt{
					width: 100%;
					float: left;
					font-size: 11px;
					margin-top: -20px;
					color:#3d3d3d;
					font-weight: 700;
				}
				.bom_img{
					width: 100%;
					image{
						margin-top: 10px;
						float: left;
						width:60px;
						height: 60px;
						background-size: 100%;
						margin-left: 5px;
						border-radius: 0.2em;
						&:first-child{
							margin-left: 0px;
						}
					}
				}
			}
		}
		
		.tarb_new{
			position: fixed;
			bottom: 0px;
			left: 0px;
			height: 50px;
			width: 100%;
			font-size: 12px;
			background: #fff;
			padding-top: 10px;
			font-weight: 700;
			
			.tar_home{
				width: 50%;
				float: left;
				view{
					width: 150px;
					height:35px;
					line-height: 35px;
					background: rgba(216, 216, 216, 0.3);
					color:#000;
					margin: 0 auto;
					text-align: center;
					border-radius: 0.3em;
				}
			}
			
			.tar_order{
				width: 50%;
				float: left;
				view{
					width: 150px;
					height:35px;
					line-height: 35px;
					background: #45C4B0;
					color:#fff ;
					margin: 0 auto;
					text-align: center;
					border-radius: 0.3em;
				}
			}
		}
	
	.zong{
		position: fixed;
		width: 90%;
		text-align: center;
		margin: 0 auto;
		/* #ifdef MP-WEIXIN */
		margin-left: 5%;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		margin-left: 8%;
		/* #endif */
		top:15%;
		z-index:102;
	}
	.biaoqian{
		
			border-radius: 0.5em;
			background: #fff;
			width:600rpx;
			margin: 0 auto;
			.top{
				padding-top:70rpx;
				font-size: 28rpx;
				color: #000;
			    text-align: center;
				width: 90%;
				margin-left: 5%;
				image{
					width: 130rpx;
					height: 130rpx;
					position: absolute;
					left: 265rpx;
					top:-35px;
					margin: 0 auto;
					border-radius: 20em;
				}
				view{
					&:first-child{
						font-weight: 700;
						font-size:16px;
						color: #3D3D3D;
					}
					&:last-child{
						margin-top: 6px;
						font-size:12px;
						color: #999;
					}
				}
			}
			
			.tab{
				width:86%;
				margin-left: 7%;
				border-radius: 0.5em;
				text-align: center;
				float: left;
				color:#999;
				font-size: 27rpx;
				margin-top:40rpx;
				text-align: left;
				padding-bottom: 20px;
				background: rgba(216, 216, 216, 0.3);
				view{
					margin: 5px;
					width:90%;
					font-weight: 500;
					padding-bottom: 20px;
					margin-left: 16rpx;
					border-radius: 0.5em;
					text-align: center;
					float: left;
					color: #999;
					text-align: left;
				}
			}
			
			.not_like{
				width:86%;
				margin-left: 7%;
				border-radius: 0.5em;
				text-align: center;
				float: left;
				color:#999;
				font-size: 27rpx;
				margin-top:40rpx;
				text-align: left;
				padding-bottom: 20px;
				background: rgba(216, 216, 216, 0.3);
				.tp{
					padding: 5px 10px;
					font-size: 12px;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				}
				image{
					margin-top: 5px;
					width:60px;
					height: 60px;
					float: left;
					border-radius: 0.5em;
					margin-left: 5px;
					&:first-child{
						margin-left: 0px;
					}
				}
			}
			
			.line{
				margin-top:30rpx;
				width:88%;
				margin-left:6%;
				float: left;
				height: 0px;
				opacity: 1;
				border: 1rpx solid rgba(153, 153, 153, 0.1);
			}
			.cont_t{
				border-radius: 8px;
				opacity: 1;
				background: #45C4B0;
				float: left;
				width: 80%;
				height: 86rpx;
				margin-left: 10%;
				margin-right: 10%;
				text-align: center;
				margin-top: 30rpx;
				color: #fff;
				line-height: 86rpx;
			
			}
			.cont_b{
				float: left;
				width: 100%;
				text-align: center;
				margin-top: 20rpx;
				background: rgba(69, 196, 176, 0.05);
				float: left;
				width: 92%;
				height: 86rpx;
				margin-left: 4%;
				color: #45C4B0;
				.t1{
					width: 50%;
					margin: 0 auto;
					margin-top: 20rpx;
					image{
						width:33rpx;;
						height: 33rpx;
						float: left;
					}
					.tex{
						 float: left;
						 margin-left: 10rpx;
					}
				}
				
				
			}
		}
	.cl1{
			height: 60rpx;
			width: 60rpx;;
			position: relative;
			/* #ifdef APP-PLUS */
			top:-70rpx;
			/* #endif */
			/* #ifndef APP-PLUS */
			top:-70rpx;
			/* #endif */
	}
	.zhezhao{
		height: 100vh;
		position: fixed;
		top:0rpx;
		right:0px;
		width: 100%;
		z-index:101;
		background: rgba(51, 51, 51, 0.6);
	}
	}
	
	// 举报弹窗
	.mask {
		background: #F2F5F2;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		overflow: hidden;
	
		.matop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 68rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			background-color: #ffffff;
	
			.mapic {
				width: 40rpx;
				height: 40rpx;
				flex-shrink: 0;
			}
	
			.matxt {
				flex-grow: 1;
				font-size: 28rpx;
				padding: 0 16rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
			}
		}
	
		.qubox {
			line-height: 120rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
			letter-spacing: 0em;
			color: #3D3D3D;
			height: 120rpx;
			opacity: 1;
			background: #FFFFFF;
		}
	}

</style>